/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="content">
    <div class="header" v-if="appInfo.header">
      <NavBar :title="appInfo.header && appInfo.header.text">
        <router-link slot="right" to="/message" style="width: 100%;text-align: center;">
          <i class="iconfont icon-message" style="font-size: 20px;color: #fff; position: relative;">
            <Badge styles="position: absolute; top: -4px; right: -8px;">11</Badge>
          </i>
        </router-link>
      </NavBar>
    </div>
    <div class="main">
      <div class="swipe">
        <mt-swipe :auto="Number(banner.speed)">
          <mt-swipe-item v-for="(item, index) in banner.items" :key="index">
            <img :src="item.src" :alt="item.src">
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="chunk" v-for="(item,index) in appInfo.apps" :key="index">
        <div class="title">
          <p>{{item.groupName}}</p>
        </div>
        <ul>
          <!-- <li v-for="(j,k) in item.items" :key="k">{{j.text}}</li> -->
          <li v-for="(j,k) in item.items" :key="k" @click="handlerItem(j)">
            <img :class="colorList[k] || 'blue'" :src="j.icon" :alt="j.text">
            <p>{{j.text}}</p>
            <!-- <span class="badge-box">
              <Badge>11</Badge>
            </span> -->
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Badge from "../../components/Badge/Badge";
import NavBar from "../../components/NavBar/NavBar";
import { Swipe, SwipeItem } from "mint-ui";
import { mapState } from "vuex";

export default {
  data() {
    return {
      colorList: ["blue", "orange", "yellow", "purple"]
    };
  },
  // 进入路由时,恢复列表状态
  beforeRouteEnter(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      if (from.path === "/login") {
        vm.$store.dispatch("getAppInfo", () => {});
      }
    });
  },
  computed: {
    ...mapState(["appInfo"]),
    banner: function() {
      return this.appInfo.banner || {};
    }
  },
  methods: {
    goto(path) {
      this.$router.replace(path);
    },
    handlerItem(item) {
      const self = this;
      const name = item.name;
      switch (name) { //待办事项
        case "do":
          this.$router.push({
            path: "/todo",
            query: { appname: item.name }
          });
          break;

        default:
          this.$router.push({
            path: "/taskList",
            query: { appname: item.name }
          });
          break;
      }
    }
  },
  mounted() {},
  components: {
    NavBar,
    Badge,
    "mt-swipe": Swipe,
    "mt-swipe-item": SwipeItem
  }
};
</script>

<style lang='less' scoped>
@import "../../util/themt.less";

.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
// .header-badge-box{
//   position: absolute;
//   top: 0;
//   left: 0;
// }
.header {
  height: 46px;
  width: 100%;
}
.swipe {
  height: 40vw;
  width: 100vw;
  img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
  }
}
.main {
  width: 100%;
  height: calc(~"100% - 96px");
  overflow-y: auto;
  overflow-x: hidden;
}
.chunk {
  background: #fff;
  margin-top: 10px;
  .bottom-border-1px(@border-base);
  .title {
    padding: 10px 0;
    line-height: 25px;
    position: relative;
    .bottom-border-1px(@border-base);
    p {
      padding: 0 16px;
      border-left: 5px solid @primary;
      color: @gray;
    }
  }
  ul {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    li {
      flex: 1;
      min-width: 25%;
      max-width: 25%;
      font-size: 14px;
      margin: 10px 0;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      .badge-box {
        position: absolute;
        top: 0;
        right: 25%;
      }
      img {
        width: 50%;
        border-radius: 50%;
        background: #ff0000;
        max-width: 100%;
        max-height: 100%;
        display: block;
        .typeImgBg();
      }
      p {
        width: 100%;
        text-align: center;
        padding: 10px 0;
      }
    }
  }
}
</style>
